<!--AGV控制-->
<script setup lang="ts">
import { ref, watch } from "vue";
import { Scissor } from "@element-plus/icons-vue";
import axios from "axios";
import ROSLIB from "roslib";
const ros = new ROSLIB.Ros({
  url: "ws://localhost:9090"
});
const cmdVel = new ROSLIB.Topic({
  ros: ros,
  name: "/cmd_vel",
  messageType: "geometry_msgs/Twist"
});
const jpegImage = ref([]);
const linearSpeed = ref(0);
const angularSpeed = ref(0);
const twist = new ROSLIB.Message({
  linear: {
    x: 0,
    y: 0,
    z: 0
  },
  angular: {
    x: 0,
    y: 0,
    z: 0
  }
});
watch([linearSpeed, angularSpeed], (newValue, oldValue) => {
  twist.linear.x = newValue[0];
  twist.angular.z = newValue[1];
  console.log(newValue, oldValue);
  cmdVel.publish(twist);
});
const Getimg = async () => {
  const response = await axios.get("/api/snapshot?topic=/usb_cam/image_raw", {
    responseType: "blob"
  });
  const reader = new FileReader();
  reader.onload = () => {
    const base64data = reader.result;
    jpegImage.value.push(base64data);
  };
  reader.readAsDataURL(response.data);
};
const deleteImage = index => {
  jpegImage.value.splice(index, 1);
};
</script>

<template>
  <div>
    <el-card shadow="never">
      <div class="slider-demo-block">
        <span class="demonstration">线速度</span>
        <el-slider v-model="linearSpeed" show-input />
      </div>
      <div class="slider-demo-block">
        <span class="demonstration">角速度</span>
        <el-slider v-model="angularSpeed" show-input />
      </div>
      <el-divider style="margin: 5px 0" />
      <el-button type="primary" :icon="Scissor" @click="Getimg">截图</el-button>
      <div class="demo-image">
        <div v-for="(image, index) in jpegImage" :key="index" class="block">
          <!-- <span class="demonstration">{{ index }}</span> -->
          <el-image
            style="width: 100px"
            v-if="image !== null"
            :src="image"
            :fit="'fill'"
          >
            <!-- <template #placeholder>
              <div class="image-slot">Loading<span class="dot">...</span></div>
            </template> -->
          </el-image>
          <el-button @click="deleteImage(index)">删除</el-button>
        </div>
      </div>
    </el-card>
  </div>
</template>

<style scoped>
.slider-demo-block {
  display: flex;
  align-items: center;
}
.slider-demo-block .el-slider {
  margin-top: 0;
  margin-left: 12px;
}
.slider-demo-block .demonstration {
  font-size: 14px;
  color: var(--el-text-color-secondary);
  line-height: 44px;
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  margin-bottom: 0;
}
.slider-demo-block .demonstration + .el-slider {
  flex: 0 0 90%;
}
.demo-image .block {
  padding: 5px 0;
  text-align: center;
  border-right: solid 1px var(--el-border-color);
  display: inline-block;
  width: 40%;
  box-sizing: border-box;
  vertical-align: top;
}
.demo-image .block:last-child {
  border-right: none;
}
.demo-image .demonstration {
  display: block;
  color: var(--el-text-color-secondary);
  font-size: 14px;
  margin-bottom: 10px;
}
</style>
